{% extends 'base/base.html' %}
{% load querystring_tags %}
{% block title %}菜谱列表 - 美食管理系统{% endblock %}

{% block main %}
<div class="row">
  <div class="col-lg-10 mx-auto">
    <!-- 搜索栏 -->
    <form method="get" class="d-flex justify-content-center mb-4 gap-2">
      <input class="form-control form-control-lg w-auto" type="text" name="search"
             placeholder="搜索菜谱..." value="{{ search_query }}">
      <button class="btn btn-primary btn-lg px-4" type="submit">搜索</button>
    </form>

    <!-- 卡片网格 -->
    <div class="row g-4">
      {% if page_obj %}
        {% for caipu in page_obj %}
          <div class="col-sm-6 col-md-4 col-xl-3">
            <div class="card h-100 shadow-sm food-card">
              {% if caipu.get_images_list.0 %}
                <img src="{{ caipu.get_images_list.0 }}" alt="{{ caipu.title }}" class="card-img-top">
              {% else %}
                <div class="bg-light d-flex align-items-center justify-content-center"
                     style="height: 160px; color: #999;">暂无图片</div>
              {% endif %}
              <div class="card-body d-flex flex-column">
                <h5 class="card-title text-danger">{{ caipu.title }}</h5>
                <p class="card-text text-muted flex-grow-1">
                  {{ caipu.desc|default:"暂无介绍"|truncatechars:42 }}
                </p>
                  {% if page_obj.previous_page_number > 1 %}
                    <a href="{% url 'main:caipu_detail' caipu.id %}?page={{ page_obj.previous_page_number }}" class="btn btn-sm btn-primary mt-auto">查看详情</a>
                  {% else %}
                    <a href="{% url 'main:caipu_detail' caipu.id %}?page=1" class="btn btn-sm btn-primary mt-auto">查看详情</a>
                  {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <div class="text-center text-muted py-5">没有找到相关菜谱</div>
      {% endif %}
    </div><!-- /.row -->

    <!-- 分页 -->
    {% if page_obj.paginator.num_pages > 1 %}
      <nav aria-label="Page navigation" class="mt-5">
        <ul class="pagination justify-content-center flex-wrap">
          {% if page_obj.has_previous %}
            <li class="page-item">
              <a class="page-link" href="?page=1&search={{ search_query }}">首页</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="?page={{ page_obj.previous_page_number }}&search={{ search_query }}">上一页</a>
            </li>
          {% endif %}

          {% for num in page_obj.paginator.page_range %}
            {% if num == page_obj.number %}
              <li class="page-item active"><span class="page-link">{{ num }}</span></li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
              <li class="page-item">
                <a class="page-link" href="?page={{ num }}&search={{ search_query }}">{{ num }}</a>
              </li>
            {% endif %}
          {% endfor %}

          {% if page_obj.has_next %}
            <li class="page-item">
              <a class="page-link" href="?page={{ page_obj.next_page_number }}&search={{ search_query }}">下一页</a>
            </li>
            <li class="page-item">
              <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}&search={{ search_query }}">末页</a>
            </li>
          {% endif %}
        </ul>
      </nav>
    {% endif %}
  </div><!-- /.col -->
</div><!-- /.row -->
{% endblock %}